<template>
    <div class="btg">
        <div class="tops">
            <div>
                <span>年龄比例</span>
                <p class="bot"></p>
            </div>
        </div>
        <div class="bots" ref="bots">

        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'
let bots = ref()
let option = {
    // backgroundColor:'#222',
    // 1.鼠标移入提示
    tooltip: {
        trigger: 'item'
    },
    // 2.图例组件
    legend: {
        top: '5%',
        // left: 'center',
        bottom:50,
        right:20,
        orient: 'vertical',
        // 文本样式
        textStyle: {
            color: '#fff'
        }
    },
    // 3.图表内容
    series: [
        getItem({ name: 'AAAA景区', radius: ['10%', '20%'], startAngle: -10, value: 70, color1: '#8915f9', color2: '#3d13fd' }),
        getItem({ name: '免费景区', radius: ['25%', '35%'], startAngle: 50, value: 50, color1: '#f72f48', color2: '#f44179' }),
        getItem({ name: '度假村', radius: ['40%', '50%'], startAngle: 260, value: 50, color1: '#1686f3', color2: '#32b8fc' }),
        getItem({ name: '文化古城', radius: ['55%', '65%'], startAngle: 150, value: 60, color1: '#2648f7', color2: '#2d8af9' }),
    ],
    srid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
    },
};

/* { name:标题 , radius:[内圆直径,外圆直径] ,
startAngle:圆心角  value:数据 , 
color1: 颜色, color2: 颜色 } */
function getItem(data: { name: any; radius: any; startAngle: any; value: any; color1: any; color2: any; }) {
    return {
        name: '景区资源',
        type: 'pie',
        center: ['35%', '50%'],
        radius: data.radius,
        startAngle: data.startAngle,
        avoidLabelOverlap: false,
        label: {
            show: true,
            //   color:'#2196b0'
            // position: 'center'
        },
        // 鼠标移入时文本状态
        emphasis: {
            label: {
                // show: true,
                fontSize: 20,
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: true,
            length: 60,
            length2: 20
        },
        data: [
            {
                value: data.value, name: data.name,
                itemStyle: {
                    // 渐变颜色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: data.color1
                        },
                        {
                            offset: 1,
                            color: data.color2
                        }
                    ])
                },
            },
            {
                value: 100 - data.value, name: data.name,//设置name防止legend错位
                itemStyle: {
                    // 颜色设置为none,则该片段不渲染
                    color: 'none'
                },
                label: { show: false }
            },

        ]
    }
}
onMounted(() => {
    let botsEcar = echarts.init(bots.value)
    botsEcar.setOption(option)
})


</script>

<style scoped lang="scss">
.btg {
    height: 28%;

    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: cover;

    .tops {
        margin-top: 0;
        height: 50px;
        width: 100%;
        height: 32%;

        div {
            font-size: 20px;
            width: 60%;
            margin-left: 10px;
            margin-top: -10px;

            .bot {
                margin-top: 10px;
                height: 5px;
                background: url(../../images/dataScreen-title.png) no-repeat;

            }
        }

    }

    .bots {
        width: 100%;
        height: 200px;
    }
}</style>